<template>
  <view class="container">
    <z-paging
      ref="paging"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      empty-view-text="暂时还没有数据咯~"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      :empty-view-img-style="imgStyle"
    >
      <view slot="top">
        <u-navbar height="50" title="邀请商户" title-size="36" title-color="#333"></u-navbar>
      </view>
      <view class="goodsItemView">
        <view
          v-if="itemCount >= 0"
          class="count-team dis-flex flex-y-center"
          style="margin-top: 20rpx"
        >
          <u-icon name="/static/count-team.png" size="30"></u-icon>
          <view style="margin-left: 10rpx">
            <text>共有</text>
            <text class="bold">{{ itemCount }}个</text>
            <text>直推商户</text>
          </view>
        </view>
        <view class="itemView" v-for="(item, index1) in itemList" :key="index1">
          <view class="content dis-flex flex-y-between">
            <view class="user-box dis-flex flex-y-center">
              <u-avatar :src="item.shop.logo" size="80"></u-avatar>
              <view class="info">
                <view class="tel">{{ item.shop.name }}</view>
                <view class="type">{{ item.shop.contactMobile }}</view>
              </view>
            </view>
            <view class="rightView">
              <view class="date">{{ $u.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM') }}</view>
              <view class="type">绑定时间</view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      imgStyle: {
        width: '12rem'
      },
      show: false,
      itemList: [],
      itemCount: -1
    }
  },
  onShow() {
    this.queryList(1)
  },
  methods: {
    queryList(pageNo = 1, pageSize = 10) {
      if (pageNo === 1) {
        this.itemList = []
      }
      let url = '/app-api/brokerage/merchant/page'
      this.$u
        .get(url, {
          pageNo,
          pageSize
        })
        .then((res) => {
          this.$refs.paging.complete(res.data.list)
          this.itemCount = res.data.total
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.goodsItemView {
  padding: 0 20rpx;
}

.count-team {
  width: 710rpx;
  height: 80rpx;
  background: #ffffff;
  border-radius: 10rpx;
  margin: auto;
  padding: 20rpx;
  color: #666666;

  .bold {
    font-size: 30rpx;
    color: #333333;
    padding: 0 4rpx;
    font-weight: 600;
  }
}

.itemView {
  background: #ffffff;
  border-radius: 10rpx;
  padding: 30rpx 20rpx;
  margin-top: 20rpx;

  .info {
    margin-left: 18rpx;
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }

  .rightView {
    text-align: right;
    height: 80rpx;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }

  .type {
    font-size: 20rpx;
    color: #999999;
  }

  .share-user {
    font-size: 24rpx;
    color: #fa453c;
    padding: 10rpx 0 0 98rpx;
  }
}
</style>
